<template>
  <div class="lazyscroll">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        ref="scrolllist"
        :offset="offsetaway"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
        <div class="scrolllist">
          <template v-for="column in scrollColumn">
            <div class="scrollBox" :key="column">
              <template v-for="item,index in list[column - 1]">
                <!--  同一类型我只存了50条数据，在兴趣推荐占比70%的情况下很可能本次取出的pagesize10条数据里就有重复 -->
                
                <a class="scrollItem" :key="item.id+'|'+pageindex+'|'+column+'|'+index" @click="go(item)">
                  <div
                    class="topwrapper"
                    :class="{ isadvert: item.isadvert ? true : false }"
                  >
                    <img
                      v-if="item.item_cover"
                      :src="item.item_cover"
                      lazy-load
                      class="topImage"
                    />
                    <img v-else :src="noimg" lazy-load class="topImage" />
                  </div>
                  <div class="bottomwrapper">
                    <div class="title ellipsis-2-line">{{ item.title }}</div>
                    <div class="body">
                      <!-- <van-image
                        class="hoticon"
                        fit="cover"
                        lazy-load
                        :src="hoticon"
                      /> -->
                      <img class="hoticon" :src="hoticon" />
                      <div class="hotval">{{ parseFloat(item.follower_count/10000).toFixed(2) }}万</div>
                      <div class="author">{{ item.nickname }}</div>
                    </div>
                  </div>
                </a>
              </template>
            </div>
          </template>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getscroll,savelog } from "@/api/mixin";
import { Toast } from "vant";
export default {
  name: "lazyscroll",
  data() {
    return {
      offsetaway:300, //scroll触发刷新的距离
      hoticon: require("@/assets/img/hot.png"),
      noimg: require("@/assets/img/noimg.png"),
      screenWidth: document.body.clientWidth,
      scrollColumn: 2, //纵向几列滚动
      loading: false, //false加载完成 true加载中
      finished: false, //全部加载完成
      refreshing: false, //刷新中
      error: false, //是否具有错误
      running: false, //防止重复点击
      pagesize: 10, //每次获取的记录数
      pageindex: 1, //默认第1页
      list: [
        // [
        //   {
        //     title: "安全第一！#平哥平嫂",
        //     share_url:
        //       "https://www.iesdouyin.com/share/video/6995705151453416718/?region=CN&mid=6968628797428419341&u_code=0&titleType=title&did=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&iid=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&with_sec_did=1",
        //     author: "平哥平嫂",
        //     item_cover:
        //       "https://p29.douyinpic.com/img/tos-cn-p-0015/2af458a729fe4704879ff9cfb458bfd8~c5_300x400.jpeg?from=2563711402_large",
        //     hot_value: 189624695,
        //     hot_words: "安全,第一,平哥,平嫂",
        //     play_count: 284129846,
        //     digg_count: 1794843,
        //     comment_count: 61414,
        //   },
        //   {
        //     title: "于月仙遗体告别仪式今日举行 马丽娟代表赵本山送别",
        //     share_url:
        //       "https://www.iesdouyin.com/share/video/6995701937178004773/?region=CN&mid=6801642418631592718&u_code=0&titleType=title&did=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&iid=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&with_sec_did=1",
        //     author: "微观安徽",
        //     item_cover:
        //       "https://p9.douyinpic.com/img/tos-cn-p-0015/16706877b18344d38741fd64674d0c7c_1628813792~c5_300x400.jpeg?from=2563711402_large",
        //     hot_value: 110907967,
        //     hot_words:
        //       "告别,仪式,赵本山,于月仙,马丽,遗体,告别仪式,今日,举行,马丽娟,代表,送别",
        //     play_count: 147292385,
        //     digg_count: 1067572,
        //     comment_count: 60157,
        //   },
        //   {
        //     title: "戴口罩 少聚集 勤洗手 多通风#七夕取消是什么梗 ",
        //     share_url:
        //       "https://www.iesdouyin.com/share/video/6995453276732837127/?region=CN&mid=6995453327039417124&u_code=0&titleType=title&did=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&iid=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&with_sec_did=1",
        //     author: "宽甸融媒",
        //     item_cover:
        //       "https://p3-dy-ipv6-test.byteimg.com/img/tos-cn-p-0015/1de43d0f2f514aec8fd688b50fb17e1f~c5_300x400.jpeg?from=2563711402_large",
        //     hot_value: 100614753,
        //     hot_words: "口罩,聚集,勤洗手,通风,七夕,取消,什么",
        //     play_count: 144098443,
        //     digg_count: 2893197,
        //     comment_count: 173391,
        //   },
        //   {
        //     title: "法警押解现场。#政媒原创作者联盟 @北三环政能量  ",
        //     share_url:
        //       "https://www.iesdouyin.com/share/video/6995486912471518478/?region=CN&mid=6995486944415304479&u_code=0&titleType=title&did=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&iid=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&with_sec_did=1",
        //     author: "兴义市人民法院",
        //     item_cover:
        //       "https://p29.douyinpic.com/img/tos-cn-p-0015/1993024cb11f4f0a867fa983950ea40e~c5_300x400.jpeg?from=2563711402_large",
        //     hot_value: 95356269,
        //     hot_words: "现场,法警,押解,政媒原,创作者,联盟,北三环,能量",
        //     play_count: 178466852,
        //     digg_count: 1164047,
        //     comment_count: 22574,
        //   },
        //   {
        //     title:
        //       "8月12日河南商丘，一男子疫情期间练习飞牌，目前可完成高难度动作",
        //     share_url:
        //       "https://www.iesdouyin.com/share/video/6995744069095836942/?region=CN&mid=6995744118601304840&u_code=0&titleType=title&did=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&iid=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&with_sec_did=1",
        //     author: "每日热搜",
        //     item_cover:
        //       "https://p3.douyinpic.com/img/tos-cn-i-0813/064d574435d64ef6a93494e89eb33a0b~c5_300x400.jpeg?from=2563711402_large",
        //     hot_value: 89722736,
        //     hot_words:
        //       "12,河南,商丘,男子,疫情,期间,练习,飞牌,目前,完成,高难度,动作",
        //     play_count: 129691532,
        //     digg_count: 994787,
        //     comment_count: 36715,
        //   },
        // ],
        // [
        //   {
        //     title:
        //       "8月12日16时，#湖北启动防汛III级应急响应！预计今明两天湖北仍有较明显降雨，愿平安！",
        //     share_url:
        //       "https://www.iesdouyin.com/share/video/6995482800853961997/?region=CN&mid=6995482856373898015&u_code=0&titleType=title&did=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&iid=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&with_sec_did=1",
        //     author: "湖北日报",
        //     item_cover:
        //       "https://p29.douyinpic.com/img/tos-cn-i-0813/becec9a6213547fda078df31dcbd76f0~c5_300x400.jpeg?from=2563711402_large",
        //     hot_value: 87379309,
        //     hot_words:
        //       "平安,启动,12,16,湖北,防汛,III,应急,响应,预计,今明两天,明显,降雨",
        //     play_count: 157789162,
        //     digg_count: 1609484,
        //     comment_count: 126638,
        //   },
        //   {
        //     title: "张哲瀚被扒曾到日本神社游玩，本人发微博道歉",
        //     share_url:
        //       "https://www.iesdouyin.com/share/video/6995804527756643620/?region=CN&mid=6968747734534720292&u_code=0&titleType=title&did=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&iid=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&with_sec_did=1",
        //     author: "微观安徽",
        //     item_cover:
        //       "https://p3-dy-ipv6-test.byteimg.com/img/tos-cn-i-0813/5cb88d2e44b94e3abdc4c08f70654ec7~c5_300x400.jpeg?from=2563711402_large",
        //     hot_value: 80660732,
        //     hot_words: "张哲瀚,日本,神社,游玩,本人,发微博,道歉",
        //     play_count: 139807783,
        //     digg_count: 634308,
        //     comment_count: 177713,
        //   },
        //   {
        //     title:
        //       "赵本山成祖师爷，带徒子徒孙组团忽悠范伟，放话十分钟将他拿下！#赵本山 #范伟 #小品 #爆笑 ",
        //     share_url:
        //       "https://www.iesdouyin.com/share/video/6995504426668526885/?region=CN&mid=6995504451515632422&u_code=0&titleType=title&did=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&iid=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&with_sec_did=1",
        //     author: "辽台欢乐视界",
        //     item_cover:
        //       "https://p6.douyinpic.com/img/tos-cn-i-0813/a71f345eb3114f12bf7f7666edc2f94c~c5_300x400.jpeg?from=2563711402_large",
        //     hot_value: 79902945,
        //     hot_words:
        //       "赵本山,范伟,祖师爷,徒子徒孙,组团,忽悠,十分钟,拿下,小品,爆笑",
        //     play_count: 116502418,
        //     digg_count: 943732,
        //     comment_count: 13059,
        //   },
        //   {
        //     title: "蔬菜的浪漫",
        //     share_url:
        //       "https://www.iesdouyin.com/share/video/6995755384195665192/?region=CN&mid=6835640303303526414&u_code=0&titleType=title&did=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&iid=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&with_sec_did=1",
        //     author: "张国伟_国家伟大",
        //     item_cover:
        //       "https://p9.douyinpic.com/img/tos-cn-p-0015/3813b29533b14073b44b989f54a79106~c5_300x400.jpeg?from=2563711402_large",
        //     hot_value: 75803077,
        //     hot_words: "蔬菜,浪漫",
        //     play_count: 98304204,
        //     digg_count: 1473087,
        //     comment_count: 46194,
        //   },
        //   {
        //     title: "8月13日 ，三针来了！广州市民可选择接种重组新冠病毒疫苗。",
        //     share_url:
        //       "https://www.iesdouyin.com/share/video/6995743085233851661/?region=CN&mid=6995743246844545805&u_code=0&titleType=title&did=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&iid=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&with_sec_did=1",
        //     author: "珠江新闻",
        //     item_cover:
        //       "https://p9.douyinpic.com/img/tos-cn-i-0813/28dec55f1f574f0297ec48133cb442f8~c5_300x400.jpeg?from=2563711402_large",
        //     hot_value: 70112768,
        //     hot_words: "病毒,来了,选择,13,三针,广州,市民,接种,重组,新冠,疫苗",
        //     play_count: 114184225,
        //     digg_count: 355660,
        //     comment_count: 6911,
        //   },
        // ],
      ],
    };
  },
  created(){
   
    this.screenWidth = document.body.clientWidth;
    if (this.screenWidth >= 700) {
            this.scrollColumn = 4;
            this.offsetaway = 800;
            this.pagesize = 20;
          } else {
            this.scrollColumn = 2;
            this.offsetaway = 300;
            this.pagesize = 10;
    }

  },
  // mounted() {
  //   const that = this;
  //   window.onresize = () => {
  //     return (() => {
  //       window.screenWidth = document.body.clientWidth;
  //       that.screenWidth = window.screenWidth;
  //     })();
  //   };
  // },
  // watch: {
  //   screenWidth(val) {
  //     // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
  //     if (!this.timer) {
  //       // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
  //       this.screenWidth = val;
  //       this.timer = true;
  //       let that = this;
  //       setTimeout(function () {
  //         // 打印screenWidth变化的值
  //         console.log(that.screenWidth);
  //         if (that.screenWidth >= 700) {
  //           that.scrollColumn = 4;
  //            this.offsetaway = 800;
  //           this.pagesize = 20;
  //         } else {
  //           that.scrollColumn = 2;
  // this.offsetaway = 300;
  //           this.pagesize = 10;
  //         }
  //         that.timer = false;
  //       }, 400);
  //     }
  //   },
  //   scrollColumn: {
  //     handler(val, olVal) {
  //       if (val != olVal) {
  //         this.refreshing=true;
  //         this.onRefresh();
  //       }
  //     },
  //     deep: true,
  //   },
  // },
  methods: {
     go(val) {
      //登录后保存点击类型  此处可进行一系列业务方面的操作
      let ath = localStorage.getItem('authorization');
      if(ath){
         savelog(val.type,val.id).then(res=>{
          let data = res.data;
          console.log("savelogdata",data);
        }).catch(err=>{
          Toast.fail(err);
          return;
        })
      }

      window.open(val.share_url, "_parent");

      // let jsondata =val;
      // this.$router.push({
      //   name:'scrollview',
      //   params:jsondata
      // });
    },
    async onLoad() {
      //加载sidebar
      if (this.running) {
        Toast.fail("系统繁忙，请稍后再试");
        return;
      }

      //下拉刷新，多一步清空list
      if (this.refreshing) {
        this.pageindex = 1;
        this.list = [];
        this.refreshing = false;
      }

      await getscroll(this.pagesize, this.pageindex)
        .then((res) => {
          let message = res.message;
          let data = res.data;

          if (data.length < this.scrollColumn || data.length != this.pagesize) {
            Toast.fail("error");
            return;
          }

          if (data.length > 0 && this.pageindex == 1) {
            let size = this.pagesize;
            let count = this.scrollColumn;
            if (data.length < count || data.length != size) {
              Toast.fail("error");
              return;
            }

            for (let i = 0; i < data.length; i++) {
              if (i < count) {
                //前count个生成二维数组
                let tmparr = [];
                tmparr.push(data[i]);
                this.list.push(tmparr);
              } else {
                //后面的插入
                this.list[i % count].push(data[i]);
              }
            }
            this.loading = false;
            this.pageindex = this.pageindex + 1;
          } else if (data.length > 0 && this.pageindex > 1) {
            let size = this.pagesize;
            let count = this.scrollColumn;
            if (data.length < count || data.length != size) {
              Toast.fail("error");
              return;
            }

            let jump = 0; //上次跳跃的分叉点
            for (let k = 1; k < this.scrollColumn; k++) {
              if (this.list[k - 1].length > this.list[k].length) {
                jump = k;
                return;
              }
            }


              //从跳跃点开始插入数据到对应数组
              for (let m = (0 + jump),i=0; m < (data.length + jump); m++,i++) {
                this.list[m % count].push(data[i]);//从哪个数组（列）开始插入数据
              }
            

            this.loading = false;
            this.pageindex = this.pageindex + 1;
          }
          this.running = false;
        })
        .catch((err) => {
          this.error = true;
          this.loading = false;
          this.running = false;
        });
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },
};
</script>

<style lang="scss" socped>
.ellipsis-2-line {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.lazyscroll {
  width: 100%;

  & .scrolllist {
    width: 100%;

    border-radius: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;

    & .scrollBox {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-content: flex-start;
      overflow: hidden;
      .scrollItem {
        flex: 1 auto;
        background-color: #ffffff;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        display: block;
        text-decoration: none;
        color: #3c3c3c;
        font-size: 12px;
        margin-left: 5px;
        margin-right: 10px;
        margin-bottom: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        overflow: hidden;

        & .topwrapper {
          width: 100%;
          height: 258px;
          position: relative;
          overflow: hidden;
          & .topImage {
            height: 100%;
            max-width: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
          }
        }
        & .isadvert {
          height: 171px !important;
        }

        & .bottomwrapper {
          padding: 10px;
          & .title {
            font-size: 14px;
            color: #333;
            line-height: 16px;
            margin-bottom: 20px;
          }
          & .body {
            white-space: nowrap;
            line-height: 1;
            color: #f46;
            font-size: 12px;
            display: flex;
            align-items: center;
            & .hoticon {
              height: 16px;
              width: auto;
            }
            & .hotval {
            }
            & .author {
              color: #333;
              flex: 1;
              text-align: right;
            }
          }
        }
      }
    }
  }
}

::v-deep .van-list {
}
</style>